<template>
  <div class="add-order-box">
    <!-- <group>
      <popup-picker title="配送地址" v-model="type_local" show-name :data="typeList" placeholder="请选择配送地址"> 
      </popup-picker>
    </group> -->
    <!-- 选择收货店铺或者仓库 -->
    <!-- <row isclick title="收货店铺" placeholder="请选择店铺" @click.native="chooseShop" v-if="type_local[0]&&type_local[0]==1" :value="shopDetail.storeName"></row>
    <row isclick title="收货仓库" placeholder="请选择仓库" @click.native="chooseWarehouse" v-if="type_local[0]&&type_local[0]==2" :value="warehouseDetail.name"></row> -->
    <row  title="配送地址"  :value="typeList[0][type_local[0]].name"></row>
    <row  title="收货店铺"  v-if="type_local[0]&&type_local[0]==='0'" :value="shopDetail.storeName"></row>
    <row  title="收货仓库"  v-if="type_local[0]&&type_local[0]==='1'" :value="warehouseDetail.name"></row>
    <!-- <group>
        <x-address  title="所在区域"
                    :raw-value="true" 
                    :value="value"
                    :list="addressData"  
                    @on-shadow-change="getValue"
                    placeholder="请选择地址">
        </x-address>
    </group> -->
    <div v-if="type_local[0] && ((type_local[0]=== '0' && shopDetail.storeName)||(type_local[0]=== '1' && warehouseDetail.name))">
      <row title="收货地址" :value=" type_local[0] | getAdreess(shopDetail,warehouseDetail)" ></row>
    </div>
    
    <div class="order-goods-box">
        <div class="order-title">订单商品</div>
        <div class="order-list" v-for="(item,index) in goodsList" :key="index"> 
            <div class="goods-name">
              <div class="delete-goods" @click="delete_goods(index)">
                <div class="delete-circle"></div>
              </div>
              <div class="goods-name-text">{{item.goodsName}}</div> 
            </div>
            <div class="goods-tips">
              <!-- <span>(单价:{{item.supplyBoxprice}})</span> -->
              <span>(库存:{{item.stock}})</span>
            </div>
            <div class="goods-num"> <input type="number" maxlength="7" :max="item.stock" placeholder="请输入" v-model="item.num" class="ipt"> (箱)</div>
        </div>
        <div class="add-btn isbtn" @click="addGoods">+添加商品</div>
    </div>
    <row title="订单金额" :value="allPrice"></row>
    <div class="height120"></div>
    <div class="btn isbtn" @click="submit()">提交订单</div>
  </div> 
</template>

<script>
import row from '@/components/row'
import api from '@/api/api.js' 
import {  PopupPicker,Group,XAddress,ChinaAddressV4Data  } from 'vux'
import { Message } from 'element-ui'
export default { 
  components: {
    row,
    PopupPicker,
    Group,
    XAddress
  },
  watch:{ 
  },
  computed:{
    allPrice(){
      let num= 0;
      this.goodsList.forEach(item=>{
        if(item.num){
          num+=(item.supplyBoxprice * item.num)
        }
      })
      return num.toFixed(2)
    }
  },
  beforeRouteEnter(to, from, next) {
   next(vm=>{ 
      if(from.name=="PurchaseOrder" || from.name=="PurchaseIndex" || from.name=="StockList"){
        vm.initPage();
      }

    })
  }, 
  filters:{
    getAdreess(type,shopDetail,warehouseDetail){
      let obj ;
      if(type=== '0'){//店铺
        if(shopDetail.replWarehouse){
          obj = shopDetail.replWarehouse;
        }else{
          obj = shopDetail;
        }
      }else{ //仓库
        obj=warehouseDetail;
      }
      return obj.province + obj.city + obj.district + obj.address;
    }
  },
  data () {
    return { 
        addressData:ChinaAddressV4Data,
        shopDetail:{},
        warehouseDetail:{},
        type_local:[0],
        sendWarehouse:{},
        typeList:[[
          {
            name: '店铺',
            value: '1',
          },
          {
            name: '仓库',
            value: '2',
          }]
        ],
        isChange:false,
        value:[],
        adreess:'', 
        goodsList:this.$store.state.checkGoods
    }
  },
  created(){
  },
  mounted () {
    
  },
  activated(){
    this.goodsList=this.$store.state.checkGoods;
    const obj = this.$store.state.purchaseOrderDetail; 
    if(obj.tab_idx){
      if(obj.tab_idx==1){//店铺
        this.shopDetail = obj.detail;
      }else if(obj.tab_idx==2){
        this.warehouseDetail = obj.detail;
      }
      this.type_local = [ String(obj.tab_idx-1)]
    }
  },
  methods: {
    initPage(){ 
      // this.shopDetail={};
      // this.warehouseDetail={};
      // this.type_local=[];
      // this.sendWarehouse={};
      // this.isChange=false
      // this.value=[];
      // this.adreess=''; 
      this.$store.commit("setCheckGoods",[]); 
      // this.$store.commit("setPurchaseOrderDetail",{}); 
    },
    submit(){
    //  if(!this.type_local[0]){
    //     return  Message({
    //       message: "请选择配送地址！",
    //       type: 'error',
    //       duration: 1 * 1000
    //     }) 
    //   }
    //   if(this.type_local[0]=== '0'  && !this.shopDetail.storeId){
    //     return  Message({
    //       message: "请选择店铺！",
    //       type: 'error',
    //       duration: 1 * 1000
    //     }) 
    //   }
    //   if(this.type_local[0]=== '1' && !this.warehouseDetail.id){
    //     return  Message({
    //       message: "请选择仓库！",
    //       type: 'error',
    //       duration: 1 * 1000
    //     }) 
    //   }
      if(this.goodsList.length==0){
        return  Message({
          message: "请选择采购商品！",
          type: 'error',
          duration: 1 * 1000
        }) 
      } 
      let detail =this.type_local[0]=== '0' ? this.shopDetail : this.warehouseDetail;
      let data = {
        "consignee":detail.contacts,
        "mobile":detail.telephone,
        "province":detail.province,
        "city":detail.city,
        "address":detail.address,
        // "message":"", 
        warehourseCode:this.sendWarehouse.code, 
      };
      let goodsArr = [] ; 
      for(let i = 0 ; i< this.goodsList.length ; i++ ){
        const item = this.goodsList[i];
        if(!item.num || item.num<=0){
          return Message({
            message: "商品采购数量必须大于0",
            type: 'error',
            duration: 1 * 1000
          }) 
        } 
        if(item.num> Number(item.stock)){
          return Message({
            message: "商品"+ item.goodsName +"的采购数量超出库存",
            type: 'error',
            duration: 1 * 1000
          }) 
        }
        goodsArr.push({
          goodsId:item.goodsId,
          goodsNum:item.num
        })
      } 
      data.goodsList = JSON.stringify(goodsArr);
      if(this.type_local[0]=== '0'){
        data.storeId=detail.storeId;
      }else{
        data.replWarehouse = detail.id;
      }
      api.stockMng.purchaseOrderSubmit(data,res=>{  
        this.$vux.confirm.show({
          title: '提示',
          content: '您已成功下单,可在采购订单中查看该订单状态。',  
          showCancelButton:false,
          onCancel () { 
          }, 
          onConfirm: ()=> {
            this.$router.push("/purchaseOrder");
          }
        })
      }) 
    },
    chooseShop(){ //选店铺
      this.isChange = true;
      this.$router.push({path: "/chooseShop",query:{
        formType:2,
      }});
    },
    chooseWarehouse(){ //选仓库
      this.isChange = true;
      this.$router.push({path: "/chooseWarehouse",query:{
        formType:2,
      }});
    },
    delete_goods(idx){
      this.goodsList.splice(idx,1);
    },
    getValue(ids,names) {
        this.value =names;
    },
    addGoods(){
      //先查出仓库名
      // if(!this.type_local[0]){
      //   return  Message({
      //     message: "请选择配送地址！",
      //     type: 'error',
      //     duration: 1 * 1000
      //   }) 
      // } 
      // if(this.type_local[0]=== '0' && !this.shopDetail.storeId){
      //   return  Message({
      //     message: "请选择店铺！",
      //     type: 'error',
      //     duration: 1 * 1000
      //   }) 
      // }
      // if(this.type_local[0]=== '1'  && !this.warehouseDetail.id){
      //   return  Message({
      //     message: "请选择仓库！",
      //     type: 'error',
      //     duration: 1 * 1000
      //   }) 
      // }
      
      const province = this.type_local[0]=== '0'  ? this.shopDetail.province : this.warehouseDetail.province
      api.stockMng.getSelectWarehouse({
        province:province
      },res=>{  
        if(!res.result){
          return Message({
            message: "该地区暂不支持采购!",
            type: 'error',
            duration: 1 * 1000
          }) 
        }
        this.sendWarehouse = res.result;
        this.$store.commit("setCheckGoods",this.goodsList);
        this.$router.push({path:"/chooseGoods", query:{ warehouseName: res.result.name }})      
      })
    }
  }
}
</script>
<style lang="less" scoped>
.order-goods-box{
    padding: 20px;

}
.order-title{
    font-size: .28rem;
    font-weight: bold;
}
.goods-num{
    color: #888;
    input{
      width: 1.0rem;
    }
}
/deep/.weui-cells:before{
    display: none;
}
/deep/.vux-no-group-title{
  margin-top: 0;
}
/deep/.weui-cell{
  padding: 12px 20px;
}
/deep/.weui-cells:after{
  left: 20px;
}
.goods-name{
  display: flex;
}
.goods-tips span{
  margin-left: .08rem;
  font-size: .22rem;
  color: #999;
}
.order-list{
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: .30rem 0;
    align-items: center;
    &::before{
        position: absolute;
        content: '';
        bottom: 0;
        right: -20px;
        left: 0;
        height: 1px;
        background: #f7f7f7;
    }
}

.add-btn{
    height: .68rem;
    width: 5.9rem;
    margin: .80rem auto;
    border-radius: .34rem;
    text-align: center;
    line-height: .68rem;
    color: #fff;
    // background: #FABE00;
    border: 1px solid #FABE00;
    color: #FABE00;
    white-space: .4rem;
}
.height120{
    height: 60px;
}
.delete-goods{
  width: .42rem;
  height: .42rem;
  margin-right: .12rem;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  .delete-circle{
    width: .25rem;
    height: .03rem;
    background: #fff;
  }
}
.btn{
    text-align: center;
    line-height: 50px;
    background: #FABE00;
    color: #fff;
    height: 50px;
    font-size: 16px;
    letter-spacing: 4px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}
</style>